<template>
	<view class="index">
		<template v-if="Object.keys(userInfo).length && userInfo.is_sale">
			<home ref="childHone" :visible="tabbarIndex === 0" />
			<event :visible="tabbarIndex === 1" />
			<!-- <TUIConversation v-if="tabbarIndex === 2"></TUIConversation> -->
			<my :visible="isTabbarIndex" />
		</template>
		<template v-if="Object.keys(userInfo).length && !userInfo.is_sale">
			<user-home ref="childUserHone" :visible="tabbarIndex === 0" />
			<!-- <TUIConversation v-if="tabbarIndex === 1"></TUIConversation> -->
			<UserMy :visible="isTabbarIndex" />
		</template>
		<!-- <template v-if="Object.keys(userInfo).length">
			<my :visible="isTabbarIndex" />
		</template> -->
		<!-- 底部导航 -->
		<u-tabbar class="tabbar" :value="tabbarIndex" @change="changeTab" :placeholder="true" :activeColor="activeColor" inactiveColor="#9A9A9A">
			<block v-for="(item, index) in tabbarList" :key="index">
				<u-tabbar-item :text="item.text" :dot="item.dot" :badge="item.badge">
					<image class="tabbar__item__slot-icon" slot="active-icon" :src="item.selected_src"></image>
					<image class="tabbar__item__slot-icon" slot="inactive-icon" :src="item.src"></image>
				</u-tabbar-item>
			</block>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Home from './cps/home/home.vue'
	import Event from './cps/event/event.vue'
	import My from './cps/my/my.vue'
	import UserHome from './cps/userHome/userHome.vue'
	import UserMy from './cps/userMy/userMy.vue'
	import TUIConversation from '../../TUIKit/components/TUIConversation/index'

	export default {
		components: {
			Home,
			Event,
			My,
			UserHome,
			UserMy,
			TUIConversation
		},
		data() {
			return {
				tabbarIndex: 0,
				tabbarList: [],
				eventTimer: null,
				activeColor: '#52B36D'
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
			isTabbarIndex() {
				if (this.userInfo) return this.userInfo.is_sale ? this.tabbarIndex === 2 : this.tabbarIndex === 1
				else return false
			}
		},
		onLoad(option) {
			if (Object.keys(option).length) {
				this.tabbarIndex = option.index * 1 || 0
			}

			// if (true) {
			// 	this.$store.commit('login/changeSystem', 'h5')
			// } else {
			// 	this.$store.commit('login/changeSystem', 'app')
			// }


			// 监听
			uni.$on('tabbarIndexUpdate', (data) => {
				this.tabbarIndex = data.tabbarIndex * 1 || 0
				if (!(data.tabbarIndex * 1)) {
					this.$refs.childHone.tabsChange(data.tabIndex)
					this.$refs.childHone.refreshData()
				}
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.userInfo.wechat_info ? `${this.userInfo.wechat_info.title}` : `首页`
			})
		},
		onShow() {
			this.initData()
		},
		onHide() {},
		onUnload() {},
		methods: {
			initData() {
				if (this.userInfo.is_sale) {
					this.activeColor = '#52B36D'
					this.tabbarList = [{
						text: '我的料',
						src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/1.png',
						selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/1_1.png'
					}, {
						text: '发布',
						src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/2.png',
						selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/2_1.png'
					}
					// , {
					// 	text: '消息',
					// 	src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/3.png',
					// 	selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/3_1.png',
					// 	dot: this.userInfo.msg_unread_count ? true : false,
					// 	badge: this.userInfo.msg_unread_count
					// }
					, {
						text: '我的',
						src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/4.png',
						selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/4_1.png'
					}]
				} else {
					this.activeColor = '#E52727'
					this.tabbarList = [{
						text: '首页',
						src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/1.png',
						selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/1_1_1.png'
					}
					// , {
					// 	text: '消息',
					// 	src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/3.png',
					// 	selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/3_1_1.png',
					// 	dot: this.userInfo.msg_unread_count ? true : false,
					// 	badge: this.userInfo.msg_unread_count
					// }
					, {
						text: '我的',
						src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/4.png',
						selected_src: 'https://code-app.oss-cn-beijing.aliyuncs.com/tabbar/4_1_1.png'
					}]
				}
			},
			// 底部导航切换
			changeTab(e) {
				this.tabbarIndex = e
				this.$forceUpdate()
			}
		},
		beforeDestroy() {
			console.log("-销毁uni.$on tabbarIndexUpdate-")
			uni.$off("tabbarIndexUpdate")
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		/* 底部导航 */
		.tabbar {
			.tabbar__item__slot-icon {
				width: 24px;
				height: 24px;
			}
		}
	}
</style>